import React,{Component} from 'react';
import {
	Text,
  Image,
  StyleSheet,
  TouchableOpacity,
  View,
  TextInput,
} from 'react-native';
export default class SearchView extends Component{
	render(){
		return(
			<View style={[styles.searchView,this.props.style]}>
        <View style={[styles.searchSubView,this.props.subStyle]}>
          <View style={styles.rightView}>
            <TouchableOpacity activeOpacity={0.5} onPress={this.props.search}>
              {this.props.index?
                <Image style={styles.searchImg} source={require('../../images/icon_search.png')}/>
                :
                <Image style={styles.searchImg} source={require('../../images/temp/icon_search.png')}/>
              }
              
            </TouchableOpacity>
          </View>
          <TextInput 
            ref={this.props._ref}
            placeholder={this.props.placeholder}
            style={styles.searchInput}
            underlineColorAndroid="transparent"
            onChangeText={this.props.onChange}
            onBlur={this.props.onBlur}
            value={this.props.val}
						returnKeyType='search'
						clearButtonMode='always'
          />
          {/* <TouchableOpacity activeOpacity={0.5}>
              <Image style={{width:16,height:16}} source={require('../../images/icon_clear.png')}/>
            </TouchableOpacity> */}
          
        </View>
      </View>
		);
	}
}
const styles = StyleSheet.create({
  rightView:{
    flexDirection:'row',
    alignItems:'center',
    paddingLeft:0,
  },  
	searchView:{
    flex:1,
    backgroundColor:'#fff',
    height:40,
    paddingTop:0,
    paddingBottom:4,
    paddingLeft:10,
		paddingRight:10,
		alignItems:'center',
		// borderWidth:1,
		// borderColor:'red'
  },
  searchSubView:{
    height: 36, 
    // borderColor: 'gray', 
    // borderWidth: StyleSheet.hairlineWidth,
    borderRadius:5,
    backgroundColor:'#fff',
    flexDirection:'row',
    alignItems:'center',
    paddingLeft:0,
		paddingRight:0,
		paddingTop:3,
  },
  searchInput:{
    padding:0,
    paddingLeft:5,
    flex:1,
    height: 36, 
    
  },
  searchImg:{
    marginLeft:5,
    width:18,
    height:18,
  },
});